<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Using advanced props</title>
  <link rel="stylesheet" href="https://unpkg.com/style.css">
  <style type="text/css">
    .markdown-body {
      max-width: 46em;
      margin: 2em auto;
      padding: 0 1em;
      overflow: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <main class="markdown-body"><link id="viewx-style-style-0" rel="stylesheet" type="text/css" href="https://unpkg.com/highlight.js@9.18.1/styles/darkula.css">
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
<hr>
<h1>Using advanced props</h1>
<p>JSONX was created so you can create react elements and components with JSON. Advanced props allow for your components to interact with dynamic data for example:</p>
<ul>
<li>referencing stateful properties dynamically</li>
<li>formatting the output of props</li>
<li>inserting templates into your JXM Objects</li>
</ul>
<p>There are five kinds of Advanced Props (Traverse, Evaluation, Format, Display and Utility props):</p>
<ul>
<li><a href="#traverse-props">1. Traverse Props</a> - used to traverse data passed into elements or other dynamic/stateful data and assign values as props
<ul>
<li><a href="#traverse-asyncprops">1.1 resourceprops/asyncprops</a> - assign dynamic data to props</li>
<li><a href="#traverse-windowprops">1.2 windowprops</a> - assign window variables to props</li>
<li><a href="#traverse-thisstate">1.3 thisstate</a> - assign stateful data to props</li>
<li><a href="#traverse-thiscontext">1.4 thiscontext</a> - assign data bound to <code>this</code> to props</li>
<li><a href="#traverse-thisprops">1.5 thisprops</a> - re-assign prop values</li>
</ul>
</li>
<li><a href="#evaluation-props">2. Evaluation Props</a> - used to create function properties or component properties and assign values as props
<ul>
<li><a href="#evaluation-dangerouslyevalprops">2.1 __dangerouslyEvalProps</a> - evaluate strings as props</li>
<li><a href="#evaluation-dangerouslybindevalprops">2.2 __dangerouslyBindEvalProps</a> - evaluate strings to generate props that are functions bound to <code>this</code></li>
<li><a href="#evaluation-dangerouslyevalallprops">2.3 __dangerouslyEvalAllProps</a> - evaluate all props from a string</li>
<li><a href="#evaluation-dangerouslyinsertfunctioncomponents">2.4 __dangerouslyInsertFunctionComponents</a> - use JSONX to generate a function component as a prop</li>
<li><a href="#evaluation-dangerouslyinsertclasscomponents">2.5 __dangerouslyInsertClassComponents</a> - use JSONX to generate a class component as a prop</li>
<li><a href="#evaluation-dangerouslyinsertcomponents">2.6 __dangerouslyInsertComponents</a> - assign React Elements to props using JSONX</li>
<li><a href="#evaluation-dangerouslyinsertreactcomponents">2.7 __dangerouslyInsertReactComponents</a> - assign React Elements to props</li>
<li><a href="#evaluation-dangerouslyinsertjsonxcomponents">2.8 __dangerouslyInsertJSONXComponents</a> - assign React Elements to props</li>
<li><a href="#evaluation-children">2.9 _children</a> - dynamically override the <code>children</code> prop</li>
<li><a href="#evaluation-functionprops">2.10 __functionProps (legacy)</a> - the old way to assign functions to props</li>
<li><a href="#evaluation-windowcomponents">2.11 __windowComponents </a> - assign window components to props</li>
<li><a href="#evaluation-windowcomponentprops">2.12 __windowComponentProps</a> - assign props of window components assign to props</li>
<li><a href="#evaluation-spreadcomponent">2.13 __spreadComponent</a> - component mapped over <code>__spread</code> data</li>
<li><a href="#evaluation-spread">2.14 __spread</a> - data used to generate props from an array (e.g. if you have a list)</li>
</ul>
</li>
<li><a href="#format-props">3. Format Props</a> - used to format children props, for example, converting number formats or formatting dates
<ul>
<li><a href="#format-stringifychildren">3.1 ___stringifyChildren</a> - convert <code>children</code> prop to string using JSON.stringify</li>
<li><a href="#format-tostringchildren">3.2 ___toStringChildren</a> - convert <code>children</code> prop to string using .toString()</li>
<li><a href="#format-tonumeral">3.3 ___toNumeral</a> - format number values as strings assigned to <code>children</code> prop using Numeral JS</li>
<li><a href="#format-jsdatetoluxonstring">3.4 ___JSDatetoLuxonString</a> - format date values as strings assigned to <code>children</code> prop using Luxon</li>
<li><a href="#format-isotoluxonstring">3.5 ___ISOtoLuxonString</a> - format iso date values as strings assigned to <code>children</code> prop using Luxon</li>
<li><a href="#format-fromluxontimezone">3.6 ___FromLuxonTimeZone</a> - format date values as strings assigned to <code>children</code> prop using Luxon</li>
</ul>
</li>
<li><a href="#utility-props">4. Utility Props</a> - used to perform functional tasks like inserting external JXM references (template support), or sharing props across components
<ul>
<li><a href="#utility-template">4.1 __template</a> - insert jxm objects from external files</li>
<li><a href="#utility-passprops">4.2 passprops</a> - pass props from parent to children elements</li>
<li><a href="#utility-debug">4.3 debug</a> - output computed advanced props and debugging information to the console</li>
<li><a href="#utility-test">4.4 test</a> - output computed advanced props and debugging information as a string</li>
</ul>
</li>
<li><a href="#display-props">5. Display Props</a> - used to decide whether or not to render elements
<ul>
<li><a href="#display-comparisonprops">5.1 comparisonprops</a> - conditionally render elements based on prop values</li>
<li><a href="#display-comparisonorprops">5.2 comparisonorprops</a> - conditionally render elements flag to use ‘or’ logic instead of ‘and’ logic</li>
</ul>
</li>
<li><a href="#applied-props">6. Applied Props</a> - used to modify other jsonx properties
<ul>
<li><a href="#applied-useformregister">6.1 useformregister</a> - A flag to insert react hook form register on jsonx component</li>
<li><a href="#applied-useremoveprops">6.2 useremoveprops</a> - remove props from component, usually used with passprops</li>
<li><a href="#applied-useincludeprops">6.3 useincludeprops</a> - include only defined props, usually used with passprops</li>
</ul>
</li>
</ul>
<h2><a name="traverse-props">1. Traverse Props </a></h2>
<p><em>(<a href="#traverse-asyncprops">resourceprops/asyncprops</a>, <a href="#traverse-windowprops">windowprops</a>, <a href="#traverse-thisprops">thisprops</a>, <a href="#traverse-thisstate">thisstate</a>, <a href="#traverse-thiscontext">thiscontext</a>)</em></p>
<p>Traverse Props are used to assign props values from different objects. For example, if you wanted to set the alt text of an image tag from the URL of the window. Because JXM objects are derived from JSON it’s impossible to get the dynamic value <code>window.location.href</code> and assign it to the alt prop without using advanced props.</p>
<pre><code class="hljs language-JavaScript"><span class="hljs-comment">//assume window.location.href = http://example.com</span>

<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>:<span class="hljs-string">'img'</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">src</span>:<span class="hljs-string">'path/to/some/image'</span>,
    <span class="hljs-attr">alt</span>: <span class="hljs-comment">// ??? http://example.com</span>
  }
};
</code></pre>
<p>Attempting to access <code>window.location.href</code> is where traverse props are useful. Conceptually you are traversing the <code>window</code> property and assign the <code>href</code> property from <code>window.location</code> to the <code>JXM.props.alt</code> property.</p>
<p>Traversing the <code>window</code> object is possible by using the <code>window props</code> traverse prop. The other traverse props are:</p>
<ul>
<li><a name="traverse-resourceprops">resourceprops</a> - traverse asynchronous properties passed to components when using JSONX programmatically</li>
<li><a name="traverse-asyncprops">asyncprops</a> - an alias for <code>resourceprops</code></li>
<li><a name="traverse-windowprops">windowprops</a> - traverse properties on <code>window</code></li>
<li><a name="traverse-thisprops">thisprops</a> - traverse properties on <code>this.props</code></li>
<li><a name="traverse-thisstate">thisstate</a> - traverse properties on <code>this.state</code></li>
<li><a name="traverse-thiscontext">thiscontext</a> - traverse properties on <code>this</code></li>
</ul>
<p>To properly reference <code>window.location.href</code> the following JXM Object would work</p>
<pre><code class="hljs language-JavaScript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
 <span class="hljs-attr">component</span>:<span class="hljs-string">'img'</span>,
 <span class="hljs-attr">props</span>:{
   <span class="hljs-attr">src</span>:<span class="hljs-string">'path/to/some/image'</span>,
 },
 <span class="hljs-attr">windowprops</span>:{
   <span class="hljs-attr">alt</span>:[<span class="hljs-string">'location'</span>,<span class="hljs-string">'href'</span>]
 }
}
</code></pre>
<p>Traverse props assign properties to <code>JXM.props</code> object by defining what property you want to set on <code>JXM.props</code> as the traverse prop property name and passing an array to the property value you want. So for a window’s location (<code>window.location.href</code>), the property value is accessed by an array to the href <code>['location', 'href']</code> where you omit the transverse object from the array path.</p>
<p>Some sample use cases are:</p>
<ul>
<li>Resourceprops transverse an object that is manually passed (usually as a result of an asynchronous fetch all - hence the name asyncprops).</li>
<li>Thisprops transverses anything bound to <code>this.props</code>, a good example would be if you’re storing and passing a user object on <code>this.props.username</code>, pulling the username would be where you would use thisprops.</li>
<li>Thisstate transverses anything bound to <code>this.state</code>, for example, if you’re updating the state of a component based on user input from a text field <code>this.state.value</code>, pulling the value would be where you would use thisstate.</li>
<li>Thiscontext transverses anything bound to <code>this</code>, a good example is if you’re using JSONX programmatically and you want to bind functionality to the render methods.</li>
<li>And like the previous example windowprops transverse anything on the global window object, like the current page location <code>window.location.href</code>.</li>
</ul>
<pre><code class="hljs language-javascript"><span class="hljs-comment">// programmatic example</span>
<span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> jsonx <span class="hljs-keyword">from</span> <span class="hljs-string">"jsonx"</span>;

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">main</span>(<span class="hljs-params"></span>) {
  <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">"/path/to/userdata"</span>);
  <span class="hljs-keyword">const</span> asyncUserData = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
  <span class="hljs-comment">/*
  asyncUserData = {
    user: {
      name: 'jsonx',
      description: 'react without javascript',
    },
    stats: {
      logins: 102,
      comments: 3,
    },
    authentication: 'OAuth2',
  };
  */</span>
  <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
    <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
    <span class="hljs-attr">props</span>: {
      <span class="hljs-attr">id</span>: <span class="hljs-string">"generatedJSONX"</span>,
      <span class="hljs-attr">className</span>: <span class="hljs-string">"jsonx"</span>
    },
    <span class="hljs-attr">resourceprops</span>: {
      <span class="hljs-attr">auth</span>: [<span class="hljs-string">"authentication"</span>],
      <span class="hljs-attr">username</span>: [<span class="hljs-string">"user"</span>, <span class="hljs-string">"name"</span>]
    },
    <span class="hljs-attr">children</span>: [
      {
        <span class="hljs-attr">component</span>: <span class="hljs-string">"p"</span>,
        <span class="hljs-attr">props</span>: {
          <span class="hljs-attr">style</span>: {
            <span class="hljs-attr">color</span>: <span class="hljs-string">"red"</span>,
            <span class="hljs-attr">fontWeight</span>: <span class="hljs-string">"bold"</span>
          }
        },
        <span class="hljs-attr">asyncprops</span>: {
          <span class="hljs-attr">title</span>: [<span class="hljs-string">"user"</span>, <span class="hljs-string">"description"</span>]
        },
        <span class="hljs-attr">children</span>: <span class="hljs-string">"hello world"</span>
      }
    ]
  };

  <span class="hljs-comment">//render something silly</span>
  jsonx.<span class="hljs-title function_">jsonxRender</span>(<span class="hljs-variable constant_">JXM</span>, asyncUserData);
  <span class="hljs-comment">/*
  Renders this JXM Object:
  JXM = {
    component: 'div',
    props: {
      id: 'generatedJSONX',
      className:'jsonx',
      auth: 'OAuth2',
      username: 'jsonx',
    },
    children: [
      {
        component: 'p',
        props: {
          style: {
            color: 'red',
            fontWeight:'bold',
          },
          title:'react without javascript',
        },
        children:'hello world',
      },
    ],
  };
  */</span>
}

<span class="hljs-title function_">main</span>();
</code></pre>
<h3>Example Traverse Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/pz845dk9/4/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/pz845dk9/4/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<hr>
<h2><a name="evaluation-props">2. Evaluation Props </a></h2>
<p><em>(<a href="#evaluation-dangerouslyevalprops">__dangerouslyEvalProps</a>, <a href="#evaluation-dangerouslybindevalprops">__dangerouslyBindEvalProps</a>, <a href="#evaluation-dangerouslyevalallprops">__dangerouslyEvalAllProps</a>, <a href="#evaluation-dangerouslyinsertfunctioncomponents">__dangerouslyInsertFunctionComponents</a>, <a href="#evaluation-dangerouslyinsertclasscomponents">__dangerouslyInsertClassComponents</a>, <a href="#evaluation-dangerouslyinsertcomponents">__dangerouslyInsertComponents</a>, <a href="#evaluation-dangerouslyinsertreactcomponents">__dangerouslyInsertReactComponents</a>, <a href="#evaluation-dangerouslyinsertjsonxcomponents">__dangerouslyInsertJSONXComponents</a>, <a href="#evaluation-children">_children</a>, <a href="#evaluation-functionprops">__functionProps (legacy)</a>, <a href="#evaluation-windowcomponents">__windowComponents </a>, <a href="#evaluation-windowcomponentprops">__windowComponentProps</a>, <a href="#evaluation-spreadcomponent">__spreadComponent</a>, <a href="#evaluation-spread">__spread</a>)</em></p>
<p>Evaluation Props are properties that are computed and resolve values onto the <code>JXM.props</code> property. They are helpful because, to interact with dynamic data and stateful information, they provide a way to describe declaratively how to assign properties onto the <code>JXM.props</code> property.</p>
<h3><a name="evaluation-children">_children</a></h3>
<p>The <code>_children</code> evaluation property is used to override the value of <code>JXM.children</code> and is usually only used when you want to dynamically set the value of the <code>children</code> property from an advanced property.</p>
<pre><code class="hljs language-javascript"><span class="hljs-comment">//current URL: http://example.com</span>
<span class="hljs-keyword">const</span> <span class="hljs-title class_">JXMWindowLocation</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"p"</span>,
  <span class="hljs-attr">windowprops</span>: {
    <span class="hljs-attr">_children</span>: [<span class="hljs-string">"location"</span>, <span class="hljs-string">"href"</span>]
  }
};
<span class="hljs-comment">// computes: { component:'p', children:'http://example.com', }</span>
</code></pre>
<h3><a name="evaluation-dangerouslyevalprops">__dangerouslyEvalProps</a>, <a name="evaluation-dangerouslybindevalprops">__dangerouslyBindEvalProps</a> ,and <a name="evaluation-dangerouslyevalallprops">__dangerouslyEvalAllProps</a></h3>
<p>The evaluation properties <code>__dangerouslyEvalProps</code>, <code>__dangerouslyBindEvalProps</code> and <code>__dangerouslyEvalAllProps</code> are properties used to evaluate strings and set the value the property value on a JXM Object.</p>
<p><code>__dangerouslyEvalAllProps</code> will evaluate a string as a function and assign the returned value of the function to the <code>props</code> property of a JXM object.
<em>Note: If passing the value as a string, remember this value has to be an expression, so either a <code>(({jsonx})=&gt;({}))</code> or <code>(function({jsonx}){})</code>. There is one parameter passed into the function, it’s the current value of the JXM Object on the jsonx property</em></p>
<p><code>__dangerouslyEvalProps</code> is used to evaluate the string value and assign it to the JXM.props value, the string must be a valid javascript expression <em>(Tip, if evaluating an object remember to wrap it ({some:‘obj’, }) )</em>. If <code>__dangerouslyEvalProps</code> is a function, it will assign the value of the function called with one parameter <code>{jsonx}</code>.</p>
<p><code>__dangerouslyBindEvalProps</code> is used to assign functions to JXM object props values. This is usually for <em>onClick</em> and <em>onChange</em> functions. Each property of <code>__dangerouslyBindEvalProps</code> has to be a function because it attempts to assign the value as a function with <code>this</code> bound to it.</p>
<p>These functions exist because there are instances where JSONX is delivered via JSON and JavaScript functions are not valid JSON values. Evaluation props are typically used sparingly when JXM is sent server-side. In practice, there are many ways to pass functions as values (especially if they are bound to JSONX, then you can always reference functions by access properties off of <code>this</code> by using <code>thiscontext</code>).</p>
<h3>Example Evaluation Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/n704z65x/7/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/n704z65x/7/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<h3><a name="evaluation-spreadcomponent">__spreadComponent</a> and <a name="evaluation-spread">__spread</a></h3>
<p>The <code>__spreadComponent</code> advanced prop is a component that maps over the <code>JXM.__spread</code> prop. Typically <code>__spreadComponent</code> used to render the same a component mapped to data from an array. Each element of the <code>JXM.__spread</code> array is passed into the child <code>__spreadComponent</code> as <code>JXM.__item</code> . <code>JXM.__spread</code> is usually set using a traverse prop to assign the property.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">'ul'</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">__spread</span>: [
      {
        <span class="hljs-attr">name</span>:<span class="hljs-string">'bob smith'</span>,
        <span class="hljs-attr">email</span>:<span class="hljs-string">'bob.smith@email.com'</span>
      },
      {
        <span class="hljs-attr">name</span>:<span class="hljs-string">'jane doe'</span>,
        <span class="hljs-attr">email</span>:<span class="hljs-string">'jane.doe@email.com'</span>
      },
      {
        <span class="hljs-attr">name</span>:<span class="hljs-string">'billy bob'</span>,
        <span class="hljs-attr">email</span>:<span class="hljs-string">'billy.bob@email.com'</span>
      },
    ],
  },
  <span class="hljs-attr">__spreadComponent</span>:{
    <span class="hljs-attr">component</span>:<span class="hljs-string">'li'</span>,
    <span class="hljs-attr">thisprops</span>:{
      <span class="hljs-attr">_children</span>:[<span class="hljs-string">'__item'</span>,<span class="hljs-string">'name'</span>]
    }
  },
}; 
<span class="hljs-comment">/* =&gt; { 
  component:'ul', children: [
    {
      component:'li', children:'bob smith',
    },
    {
      component:'li', children:'jane doe',
    },
    {
      component:'li', children:'billy bob',
    }
  ] 
};*/</span>
</code></pre>
<h3>Example Evaluation Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/e5au6td1/2/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/e5au6td1/2/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<h3><a name="evaluation-dangerouslyinsertfunctioncomponents">__dangerouslyInsertFunctionComponents</a>, <a name="evaluation-dangerouslyinsertclasscomponents">__dangerouslyInsertClassComponents</a>, <a name="evaluation-dangerouslyinsertcomponents">__dangerouslyInsertComponents</a>, <a name="evaluation-dangerouslyinsertreactcomponents">__dangerouslyInsertReactComponents</a>, <a name="evaluation-dangerouslyinsertjsonxcomponents">__dangerouslyInsertJSONXComponents</a>, <a name="evaluation-windowcomponents">__windowComponents</a>, <a name="evaluation-windowcomponentprops">__windowComponentProps</a>,</h3>
<p>The component evaluation props all assign React Elements to props. This pattern is very common in charting libraries when you need to customize labels. Typically you would assign a custom component to a prop and the component you are using would insert the customized component appropriately.</p>
<p>The most common pattern is a Function component as a prop. Using function components or class components as props require understanding how to create components with JSONX. Read <a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a> for more information.</p>
<h3>Example Evaluation Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/soec2z5w/13/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/soec2z5w/13/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<h3><a name="evaluation-functionprops">__functionProps</a> (legacy)</h3>
<p>The evaluation prop <code>__functionProps</code> is another way to assign a function value to a property in <code>JXM.props</code>. There are two ways of using <code>__functionProps</code>, one way for predefined functions and another way for dynamic functions. Using <code>__functionProps</code> may be deprecated in the future.</p>
<h4>predefined functions (legacy)</h4>
<p><code>__functionProps</code> can assign values from functions that exist on <code>this.props</code> (e.g. using something like react-router and accessing this.props.reduxRouter.push) or functions that exist on the <code>window</code> object (like window.console.log).</p>
<p>Properties are assigned by using the value of the function by access the property as a string, prefixed with “func:”. Function props merge onto <code>jsonx.props</code> after evaluating each function string.</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"button"</span>,
  <span class="hljs-attr">props</span>: {
    <span class="hljs-attr">name</span>: <span class="hljs-string">"test"</span>
  },
  <span class="hljs-attr">__functionProps</span>: {
    <span class="hljs-attr">onclick</span>: <span class="hljs-string">"func:this.props.onClick"</span>, <span class="hljs-comment">// if there's already a defined onClick Function</span>
    <span class="hljs-attr">printPage</span>: <span class="hljs-string">"func:window.print"</span>,
    <span class="hljs-attr">nav</span>: <span class="hljs-string">"func:this.props.reduxRouter.push"</span>
  }
};
</code></pre>
<h4>inline functions (legacy)</h4>
<p><code>__functionProps</code> can also generate functions from a string in a much less elegant way than using <code>__dangerouslyEvalProps</code> or <code>__dangerouslyBindEvalProps</code>. It’s very cumbersome but you define the string of the function body <code>JXM.__inline[name-of-func]</code> and reference the function on <code>__functionProps</code> by prefixing the function with <code>func:inline</code> (e.g. <code>JXM.__functionProps[func:inline[name-of-function]]</code>). You can also use the <code>__functionargs</code> advanced props to bind <code>JXM.prop</code> properties to parameters of the inline function.</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"button"</span>,
  <span class="hljs-attr">props</span>: {
    <span class="hljs-attr">name</span>: <span class="hljs-string">"test"</span>
  },
  <span class="hljs-attr">__functionargs</span>: {
    <span class="hljs-attr">onClick</span>: [<span class="hljs-string">"name"</span>]
  },
  <span class="hljs-attr">__inline</span>: {
    <span class="hljs-attr">onClick</span>: <span class="hljs-string">` window.alert("the name of this component from the prop is:" +arguments[0])`</span>
  },
  <span class="hljs-attr">__functionProps</span>: {
    <span class="hljs-attr">onClick</span>: <span class="hljs-string">"func:inline.onClick"</span>
  }
};
</code></pre>
<h3>Example Evaluation Props __functionProps</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/34ngdzyh/3/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/34ngdzyh/3/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<hr>
<h2><a name="format-props">3. Format Props </a></h2>
<p><em>(<a href="#format-stringifychildren">___stringifyChildren</a>, <a href="#format-tostringchildren">___toStringChildren</a>, <a href="#format-tonumeral">___toNumeral</a>, <a href="#format-jsdatetoluxonstring">____JSDatetoLuxonString</a>, <a href="#format-isotoluxonstring">___ISOtoLuxonString</a>, <a href="#format-fromluxontimezone">___FromLuxonTimeZone</a>)</em></p>
<p>Format Props are properties that are used to convert JXM.children values to strings. Format Props are used because the <code>children</code> parameter of <code>React.createElement</code> can only be a string or an array of React Elements.</p>
<h3><a name="format-stringifychildren">___stringifyChildren</a></h3>
<p>The <code>___stringifyChildren</code> format property converts the <code>JXM.children</code> property to a string by using <code>JSON.stringify</code>.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: { <span class="hljs-string">"some-non-string"</span>: <span class="hljs-string">"data"</span> },
  <span class="hljs-attr">___stringifyChildren</span>: <span class="hljs-literal">true</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: '{"some-non-string":"data"}' };</span>
</code></pre>
<h3><a name="format-tostringchildren">___toStringChildren</a></h3>
<p>The <code>___toStringChildren</code> format property converts the <code>JXM.children</code> property to a string by calling <code>toString()</code>.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>],
  <span class="hljs-attr">___toStringChildren</span>: <span class="hljs-literal">true</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: '1,2,3,4' };</span>
</code></pre>
<h3><a name="format-tonumeral">___toNumeral</a></h3>
<p>The <code>___toNumeral</code> format property converts the <code>JXM.children</code> property to a string by calling <code>numeral(JXM.children).format(JXM.___toNumeral)</code>. See numeral formatting options on <a href="http://numeraljs.com/">numeraljs.com</a>.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-number">15204.39084</span>,
  <span class="hljs-attr">___toNumeral</span>: <span class="hljs-string">"0,0.00"</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: '15,204.39' };</span>
</code></pre>
<h3><a name="format-jsdatetoluxonstring">___JSDatetoLuxonString</a></h3>
<p>The <code>___JSDatetoLuxonString</code> format property converts the <code>JXM.children</code> property to a string by calling <code>Luxon.DateTime.fromJSDate(JXM.children).toFormat(JXM.___JSDatetoLuxonString)</code>. See luxon formatting options from the <a href="https://moment.github.io/luxon/docs/manual/formatting.html">luxon formatting docs</a>.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(<span class="hljs-string">"2020-03-03"</span>),
  <span class="hljs-attr">___JSDatetoLuxonString</span>: <span class="hljs-string">"LLL d, yyyy"</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: 'Mar 3, 2020' };</span>
</code></pre>
<h3><a name="format-isotoluxonstring">___ISOtoLuxonString</a> &amp; <a name="format-fromluxontimezone">___FromLuxonTimeZone</a></h3>
<p>The <code>___ISOtoLuxonString</code> format property converts the <code>JXM.children</code> property to a string by calling <code>Luxon.DateTime.fromISO(JXM.children).toFormat(JXM.___ISOtoLuxonString)</code>. You can set the timezone of the ISO string by using the <code>___FromLuxonTimeZone</code> format Prop. See luxon formatting options from the <a href="https://moment.github.io/luxon/docs/manual/formatting.html">luxon formatting docs</a>.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM_NY</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-string">"2020-03-03T14:30:00.000Z"</span>,
  <span class="hljs-attr">___ISOtoLuxonString</span>: <span class="hljs-string">"ff"</span>,
  <span class="hljs-attr">___FromLuxonTimeZone</span>: <span class="hljs-string">"America/New_York"</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: 'Mar 3, 2020, 9:30 AM' };</span>

<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM_LA</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-string">"2020-03-03T14:30:00.000Z"</span>,
  <span class="hljs-attr">___ISOtoLuxonString</span>: <span class="hljs-string">"ff"</span>,
  <span class="hljs-attr">___FromLuxonTimeZone</span>: <span class="hljs-string">"America/Los_Angeles"</span>
}; <span class="hljs-comment">// =&gt; { component:'div', children: 'Mar 3, 2020, 6:30 AM' };</span>
</code></pre>
<h3>Example Format Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/5ypaotu6/3/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/5ypaotu6/3/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<hr>
<h2><a name="utility-props">4. Utility Props</a></h2>
<p><em>(<a href="#utility-template">__template</a>, <a href="#utility-passprops">passprops</a>, <a href="#utility-debug">debug</a>, <a href="#utility-test">test</a>)</em></p>
<p>Utility props generally do not mutate <code>JXM.props</code> but are used to augment the expected behavior of JSONX.</p>
<h3><a name="utility-debug">debug</a></h3>
<p>The debug flag outputs the value of the <code>JXM</code> object where <code>JXM.debug === true</code> and the value of all of the computed advanced props as well.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
    <span class="hljs-attr">component</span>: <span class="hljs-string">'div'</span>,
    <span class="hljs-attr">children</span>: <span class="hljs-string">'Debug JXM Data'</span>,
    <span class="hljs-attr">__dangerouslyEvalAllProps</span>:<span class="hljs-string">`(
      ()=&gt;({ style:{ color:"blue" } })
    )`</span>,
    <span class="hljs-attr">debug</span>:<span class="hljs-literal">true</span>,
};

<span class="hljs-comment">//outputs to console:</span>
<span class="hljs-comment">/* { 
  jsonx: {
    component: "div",
    children: "Debug JXM Data",
    __dangerouslyEvalAllProps: "(()=&gt;({ style:{ color:"blue" } }))"
    debug: true
  },
  {
    computedProps: {
      style: {color: "blue"}
    }
  }
}*/</span>
</code></pre>
<h3><a name="utility-test">test</a></h3>
<p>The test flag outputs the value of the <code>JXM</code> object where <code>JXM.test === true</code> as a string.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
    <span class="hljs-attr">component</span>: <span class="hljs-string">'div'</span>,
    <span class="hljs-attr">children</span>: <span class="hljs-string">'Test JXM Data'</span>,
    <span class="hljs-attr">test</span>:<span class="hljs-literal">true</span>,
};

<span class="hljs-comment">//outputs as a string component:</span>
<span class="hljs-comment">/* { 
  element: "div",
  children: "Debug JXM Data",
  test: true
}*/</span>
</code></pre>
<h3><a name="utility-passprops">passprops</a></h3>
<p>The passprops flag passess the props from the parent <code>JXM</code> object to each <code>JXM.children</code> JXM Object except for the <code>JXM.props.style</code> property.</p>
<pre><code class="hljs language-typescript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">'div'</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">type</span>:<span class="hljs-string">'radio'</span>,
    <span class="hljs-attr">size</span>:<span class="hljs-string">'large'</span>,
    <span class="hljs-attr">extraOne</span>:<span class="hljs-string">'ok'</span>,
    <span class="hljs-attr">title</span>:<span class="hljs-string">'my radio'</span>,
    <span class="hljs-attr">style</span>:{
      <span class="hljs-attr">background</span>:<span class="hljs-string">'red'</span>
    }
  },
  <span class="hljs-attr">passprops</span>:<span class="hljs-literal">true</span>,
  <span class="hljs-attr">children</span>:[
    {
      <span class="hljs-attr">component</span>:<span class="hljs-string">'input'</span>,
    }
  ]
};

<span class="hljs-comment">/* computes:
const JXM = {
  component: 'div',
  props:{
    type:'radio',
    size:'large',
    extraOne:'ok',
    title:'my radio',
    style:{
      background:'red'
    }
  },
  passprops:true,
  children:[
    {
      component:'input',
      props:{
        type:'radio',
        size:'large',
        extraOne:'ok',
        title:'my radio',
      },
    }
  ]
};
*/</span>
</code></pre>
<p>You can also pass a select number of props by specifying which props to pass</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">'div'</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">type</span>:<span class="hljs-string">'radio'</span>,
    <span class="hljs-attr">size</span>:<span class="hljs-string">'large'</span>,
    <span class="hljs-attr">title</span>:<span class="hljs-string">'my radio'</span>,
    <span class="hljs-attr">style</span>:{
      <span class="hljs-attr">background</span>:<span class="hljs-string">'red'</span>
    }
  },
  <span class="hljs-attr">passprops</span>:[<span class="hljs-string">'type'</span>,<span class="hljs-string">'title'</span>],
  <span class="hljs-attr">children</span>:[
    {
      <span class="hljs-attr">component</span>:<span class="hljs-string">'input'</span>,
    }
  ]
};

<span class="hljs-comment">/* computes:
const JXM = {
  component: 'div',
  props:{
    type:'radio',
    size:'large',
    extraOne:'ok',
    title:'my radio',
    style:{
      background:'red'
    }
  },
  passprops:['type','title'],
  children:[
    {
      component:'input',
      props:{
        type:'radio',
        title:'my radio',
      },
    }
  ]
};
*/</span>
</code></pre>
<h3><a name="utility-template">___template</a></h3>
<p>The <code>___template</code> advanced prop (should really only be used server-side but works in the browser too) will load JXM objects from an external file (or URL client side - note in the browser this is a synchronous request).</p>
<pre><code class="hljs language-typescript">
<span class="hljs-keyword">const</span> <span class="hljs-variable constant_">JXM</span> = {
  <span class="hljs-attr">component</span>:<span class="hljs-string">'div'</span>,
  <span class="hljs-attr">___template</span>:<span class="hljs-string">'path/to/some/jxm/json/file'</span>
}
<span class="hljs-comment">// path/to/some/jxm/json/file = { component: "section", children: "from external template"}</span>
<span class="hljs-comment">/* computes: 
{
  component:'div',
  children:[{ component: "section", children: "from external template"}]
}
*/</span>

</code></pre>
<h3>Example Utility Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/gbeatwp2/3/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/gbeatwp2/3/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<hr>
<h2><a name="display-props">5. Display Props</a></h2>
<p><em>(<a href="#display-comparisonprops">comparisonprops</a>, <a href="#display-comparisonorprops">comparisonorprops</a>)</em></p>
<p>Display Props are properties that are used to determine if a React Element rendered from a JXM Object should be rendered. Display props enable conditional logic based on the value of props to determine if an element should be shown.</p>
<h3><a href="#display-comparisonprops">comparisonprops</a> and <a href="#display-comparisonorprops">comparisonorprops</a></h3>
<p>The display prop <code>comparisionprops</code> is used to conditionally show elements if all of the comparisons are truthy. <code>comparisonprops</code> works by comparing an array of left and right side values, if they are all true, the component is rendered. If <code>JXM.comparisonorprops</code> is set to true then only one condition needs to be true to render the component.</p>
<p>The comparison values can either be literal values or the value can be a reference to any <code>JXM.props</code> value. References to values in <code>JXM.props</code> are accessed in the same way you would use traverse props, where the prop being traversed is <code>JXM.props</code>.</p>
<pre><code class="hljs language-javascript"><span class="hljs-comment">//and conditions</span>
jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-string">"evals to false, so it will not render"</span>,
  <span class="hljs-attr">comparisonprops</span>: [
    {
      <span class="hljs-attr">left</span>: [<span class="hljs-string">"bigNum"</span>],
      <span class="hljs-attr">operation</span>: <span class="hljs-string">"lte"</span>,
      <span class="hljs-attr">right</span>: [<span class="hljs-string">"smallNum"</span>]
    }, <span class="hljs-comment">// false (10000 &lt;= 100)</span>
    {
      <span class="hljs-attr">left</span>: [<span class="hljs-string">"smallNum"</span>],
      <span class="hljs-attr">operation</span>: <span class="hljs-string">"&lt;="</span>,
      <span class="hljs-attr">right</span>: [<span class="hljs-string">"bigNum"</span>]
    } <span class="hljs-comment">// true (100 &lt;= 10000)</span>
  ] <span class="hljs-comment">// false and true === false, so it won't render</span>
};
<span class="hljs-comment">//or conditions</span>
jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"div"</span>,
  <span class="hljs-attr">children</span>: <span class="hljs-string">"evals to true, so this will render"</span>,
  <span class="hljs-attr">comparisonorprops</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">comparisonprops</span>: [
    {
      <span class="hljs-attr">left</span>: [<span class="hljs-string">"truthy"</span>],
      <span class="hljs-attr">operation</span>: <span class="hljs-string">"eq"</span>,
      <span class="hljs-attr">right</span>: [<span class="hljs-string">"falsey"</span>]
    }, <span class="hljs-comment">// = false</span>
    {
      <span class="hljs-attr">left</span>: [<span class="hljs-string">"smallNum"</span>],
      <span class="hljs-attr">operation</span>: <span class="hljs-string">"eq"</span>,
      <span class="hljs-attr">right</span>: [<span class="hljs-string">"smallNum"</span>]
    } <span class="hljs-comment">// true</span>
  ] <span class="hljs-comment">// false or true === true, so render element</span>
};

<span class="hljs-comment">// All comparison operations</span>
<span class="hljs-keyword">switch</span> (opscompares.<span class="hljs-property">operation</span>) {
  <span class="hljs-keyword">case</span> <span class="hljs-string">"eq"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"=="</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> == opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"dneq"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"!="</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"!"</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> !== opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"dnseq"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"!=="</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> !== opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"seq"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"==="</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> === opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"lt"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"&lt;"</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> &lt; opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"lte"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"&lt;="</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> &lt;= opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"gt"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"&gt;"</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> &gt; opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"gte"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"&gt;="</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> &gt;= opscompares.<span class="hljs-property">right</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"dne"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"undefined"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"null"</span>:
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> === <span class="hljs-literal">undefined</span> || opscompares.<span class="hljs-property">left</span> === <span class="hljs-literal">null</span>;
  <span class="hljs-keyword">case</span> <span class="hljs-string">"!null"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"!undefined"</span>:
  <span class="hljs-keyword">case</span> <span class="hljs-string">"exists"</span>:
  <span class="hljs-attr">default</span>:
    <span class="hljs-comment">//'exists'</span>
    <span class="hljs-keyword">return</span> opscompares.<span class="hljs-property">left</span> !== <span class="hljs-literal">undefined</span> &amp;&amp; opscompares.<span class="hljs-property">left</span> !== <span class="hljs-literal">null</span>;
}
</code></pre>
<h3>Example Display Props</h3>
<table style="border:0; width:100%">
  <tbody><tr>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/jn7L54x1/4/embedded/js,html/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
    <td style="padding:0"><iframe width="100%" height="300" src="https://jsfiddle.net/yawetse/jn7L54x1/4/embedded/result/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest="" frameborder="0"></iframe>
    </td>
  </tr>
</tbody></table>
<hr>
<h2><a name="applied-props">6. applied Props</a></h2>
<p><em>(<a href="#applied-useformregister">useformregister</a>, <a href="#applied-useremoveprops">useremoveprops</a>, <a href="#applied-useincludeprops">useincludeprops</a>)</em></p>
<p>Applied Props are properties that are helper properties that are used modify other jsonx properties.</p>
<h3><a href="#applied-useformregister">useformregister</a></h3>
<p>The applied prop <code>useformregister</code> is a prop that passes a React Hook Form register to a component. It is a short cut for having to added the reference to the form reference manually.</p>
<pre><code class="hljs language-javascript">jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">name</span>:<span class="hljs-string">'firstName'</span>,
  },
  <span class="hljs-attr">useformregister</span>: <span class="hljs-literal">true</span>,
};

<span class="hljs-comment">// is equivalent to</span>
jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">name</span>:<span class="hljs-string">'firstName'</span>,
  },
  <span class="hljs-attr">thiscontext</span>:{
    <span class="hljs-attr">ref</span>: [<span class="hljs-string">'reactHookForm'</span>, <span class="hljs-string">'register'</span>]
  },
};
</code></pre>
<h3><a href="#applied-useremoveprops">useremoveprops</a></h3>
<p>The applied prop <code>useremoveprops</code> is a prop that removes a list of props from the JXM Object. It is usually used in conjunction with passprops when you want to remove extra passed props.</p>
<pre><code class="hljs language-javascript">jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">name</span>:<span class="hljs-string">'firstName'</span>,
    <span class="hljs-attr">removeThis</span>:<span class="hljs-literal">true</span>,
    <span class="hljs-attr">extraProp</span>:<span class="hljs-string">'remove me'</span>,
  },
  <span class="hljs-attr">useremoveprops</span>: [<span class="hljs-string">'removeThis'</span>,<span class="hljs-string">'extraProp'</span>],
};

<span class="hljs-comment">// is equivalent to</span>
jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">name</span>:<span class="hljs-string">'firstName'</span>,
  },
};
</code></pre>
<h3><a href="#applied-useincludeprops">useincludeprops</a></h3>
<p>The applied prop <code>useincludeprops</code> is a prop that removes all props from the JXM Object except for a list specified props. It is usually used in conjunction with passprops when you want to remove extra passed props.</p>
<pre><code class="hljs language-javascript">jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">name</span>:<span class="hljs-string">'firstName'</span>,
    <span class="hljs-attr">removeThis</span>:<span class="hljs-literal">true</span>,
    <span class="hljs-attr">extraProp</span>:<span class="hljs-string">'remove me'</span>,
    <span class="hljs-attr">keepMe</span>:<span class="hljs-string">'just this prop'</span>,
  },
  <span class="hljs-attr">useincludeprops</span>: [<span class="hljs-string">'keepMe'</span>],
};

<span class="hljs-comment">// is equivalent to</span>
jsonx = {
  <span class="hljs-attr">component</span>: <span class="hljs-string">"input"</span>,
  <span class="hljs-attr">props</span>:{
    <span class="hljs-attr">keepMe</span>:<span class="hljs-string">'just this prop'</span>,
  },
};
</code></pre>
<hr>
<h2>Next: <a href="../using-external-and-custom-components/index.html">External and Custom Components</a></h2>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
</main>


</body></html>